<template>
  <div class="my-page-container">
    <van-nav-bar class="page-nav-bar" left-arrow :title="userInfo.name" @click-left="$router.back()">
      <van-icon slot="right" name="ellipsis"></van-icon>
    </van-nav-bar>
    <!-- 用户信息 -->
    <div class="user-info-container">
      <div class="row1">
        <van-image
          class="col1"
          fit="cover"
          round
          :src="userInfo.photo"
        ></van-image>
        <div class="col2">
          <div class="row1">
            <div class="item">
              <div class="count">{{ userInfo.art_count }}</div>
              <div class="text">发布</div>
            </div>
            <div class="item">
              <div class="count">{{ userInfo.follow_count }}</div>
              <div class="text">关注</div>
            </div>
            <div class="item">
              <div class="count">{{ userInfo.fans_count }}</div>
              <div class="text">粉丝</div>
            </div>
            <div class="item">
              <div class="count">{{ userInfo.like_count }}</div>
              <div class="text">获赞</div>
            </div>
          </div>
          <div class="action">
            <van-button
              type="default"
              size="small"
              :to="{
                name:'EditUserInfo'
              }"
            >编辑资料</van-button>
          </div>
        </div>
      </div>
      <div class="intro-wrap">
        <div>
          <span>认证：</span>
          <span>{{ userInfo.intro }}</span>
        </div>
        <div>
          <span>简介：</span>
          <span>{{ userInfo.intro }}</span>
        </div>
      </div>
    </div>
    <!-- /用户信息 -->
    <!-- 我的文章列表 -->
    <div class="articleList">
      <van-list
        v-model="loading"
        :finished="finished"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        finished-text="没有更多了"
        success-duration="1500"
        @load="onLoad"
      >
        <article-item
          v-for="(item, index) in list"
          :key="index"
          :article-item="item"
        ></article-item>
      </van-list>
    </div>
    <!-- /我的文章列表 -->
  </div>
</template>

<script>
import ArticleItem from '@/components/articleItem.vue'
import { loadUserArticle } from '@/api/article'
import { getUserInfo } from '@/api/user.js'
export default {
  name: 'MyPage',
  components: {
    ArticleItem
  },
  props: {},
  data() {
    return {
      loading: false,
      finished: false,
      error: false,
      list: [],
      userInfo: {},
      page: 1
    }
  },
  created() {
    this.getUserInfo()
  },
  methods: {
    async onLoad() {
      try {
        // 异步更新数据
        const {
          data: { data }
        } = await loadUserArticle({
          page: this.page,
          per_page: 10
        })
        console.log(data);
        this.list.push(...data.results)
        // 加载状态结束
        this.loading = false
        if (data.results.length === 0) {
          this.page++
          this.finished = true
        }
      } catch (error) {
        this.loading = false
        this.error = true
      }
    },
    async getUserInfo() {
      const { data } = await getUserInfo()
      this.userInfo = data.data
      console.log(this.userInfo);
    }
  }
}
</script>

<style scope lang="less">
.my-page-container {
  font-size: 28px;
  .user-info-container {
    padding: 12px 38px;
    //   padding-top: 88px;
    background-color: #fff;
    margin-bottom: 10px;
    > .row1 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      height: 238px;
      .item {
        text-align: center;
        .text {
          font-size: 12px;
        }
      }
      > .col1 {
        width: 120px;
        height: 120px;
      }
      > .col2 {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        width: 70%;
        height: 80px;
        padding: 0 12px;
        > .row1 {
          display: flex;
          justify-content: space-between;
          margin-bottom: 30px;

        }
        .action {
          display: flex;
          justify-content: space-between;
          .van-button {
            width: 45%;
          }
        }
      }
    }
    > .intro-wrap {
        div {
          padding: 20px
        }
      }
  }
}
</style>
